<template>
  <div class="page">
    <heads></heads>
    <div class="page-content" style="width: 100%;background: #fff" v-if="ajax">
      <div style="padding:0 15px;" v-if="bankList.length!=0">
        <div class="bankli" v-for="item in bankList">
            <div>
              {{item.bankName}}
            </div>
            <div class="bankcard">
             {{item.no | substring}}
            </div>
        </div>
      </div>
      <div class="formB" v-else>
        <form>
          <mt-field class="text-red" label="开户行" disableClear :state="isName" v-model="names"   placeholder="输入开户银行" type="text"></mt-field>
          <mt-field class="text-red" label="银行卡号" disableClear :state="istels"  v-model="tels"    placeholder="输入银行卡号" type="tel"></mt-field>
           <!-- <mt-field label="银行" disableClear @click="popupshow()" v-model="bank_select" readonly="readonly"  placeholder="选择银行" type="text"></mt-field> -->
          <!-- <div class='mint-cell-wrapper' style="text-align:left;line-height:40px;"> -->
              <!-- <span style="display:inline-block;width:90px;">银行</span>
              <div class="ispad" @click="popupshow()">
                <mt-field  label="" disableClear  v-model="bank_select"  placeholder="请输入开户行信息"  readonly="readonly" type="text"></mt-field>
              </div>
          </div> -->
          <!-- <mt-field label="开户行" disableClear  v-model="coteIp"  placeholder="请输入开户行信息" type="text"></mt-field> -->
        </form>
        <div class="form-control">
          <mt-button class="form-button default"  @click="getInfo()">确定</mt-button>
        </div>
      </div>
      
    </div>
    <!-- <mt-popup position="bottom" v-if="popupVisible"  v-model="popupVisible" style="width:100%"  popup-transition="popup-fade" >
      <div class="bottom-bank">
          <div class="dialog-header" >
              <span style="padding:0 15px 0 0;" @click='btnno'>取消</span>
              <span>选择银行卡</span> -->
              <!-- <span style="float:right;padding:0 0 0 15px;" @click="btnyes">确认</span>
          </div>
          <div class="dialog-body">
            <mt-picker :slots="slots" @change="onValuesChange" :visibleItemCount='5'></mt-picker>
          </div>
        </div>
    </mt-popup> --> 
  </div>
</template>
<script>
  import heads from '../components/header'
  import { Loadmore,Toast ,MessageBox,Popup } from 'mint-ui';
  import MtButton from "../../node_modules/mint-ui/packages/button/src/button";
  export default {
    data(){
      return{
        names:[],
        tels:[],
        bank_select:'',
        coteIp:[],
        // telRex:/^1[3|4|5|7|8]\d{9}$/,
        isName:'',
        istels:'',
        bankns:'',
        iscote:'',
        isMsg:'',
        popupVisible:false,
        slots: [
          {
            flex: 1,
            values: ['招商银行', '建设银行', '农业银行', '工商银行', '浙商银行', '中国银行'],
            className: 'slot1',
            textAlign: 'center'
          }
        ],
        bankList:[],
        ajax:false
      }
    },
    mounted(){
      this.bindbankList()
    },
    methods:{
      bindbankList(){
        const _this=this;
        this.$http(this.API.bankcardList, {
            data: {
            }
          }).then(function (res) {
            if(res.flag){
                _this.bankList=res.list;
                _this.ajax=true
            }
           
            // console.log(res)
          }).catch(function (err) {
            console.log(err);
          });
      },
      popupshow(){
        const _this=this;
        _this.popupVisible=true
      },
      btnyes(){
          this.popupVisible=false
      },
      btnno(){
          this.popupVisible=false;
          this.bank_select=''
      },
      onValuesChange(picker, values) {
            this.bank_select=values[0]
            if (values[0] > values[1]) {
              picker.setSlotValue(1, values[0]);
              
            }
          },

      getInfo(){
        const _this=this;
        // if(!this.changeName()||!this.changeTels()|| !this.changeIp()){
       if(!this.changeName()||!this.changeTels()){
          MessageBox.alert(this.isMsg);
          return false
        }else {

          this.$http(this.API.bankcardAdd, {
            data: {
              bankcardBranch:encodeURI(_this.names),
              bankcardNo: _this.tels
             
            }
          }).then(function (res) {
            MessageBox.alert(res.message);
          }).catch(function (err) {
            console.log(err);
          });
        }
      },
      changeName(){
        if(this.names==''){
          this.isName='warning';
          this.isMsg='请输入开户行'
          return false
        }else if(!(/[\u4e00-\u9fa5]/).test(this.names)){
          this.isName='warning';
          this.isMsg='开户行格式错误'
          return false
        }else{
          this.isName='success';
          return true
        }
      },
      changeTels:function () {
        if(this.tels==''){
          this.istels='warning';
          this.isMsg='请输入银行卡号'
          return false
        }else{
          this.istels='success';
          return true
        }
      },
      // bankName(){
      //   if(this.bank_select==''){
      //     this.bankns='warning';
      //     this.isMsg='请选择银行'
      //     return false
      //   }else{
      //     this.bankns='success';
      //     return true
      //   }
      // },
      // changeIp(){
      //   if(this.coteIp==''){
      //     this.iscote='warning';
      //     this.isMsg='请输入开户行信息'
      //     return false
      //   }else{
      //     this.iscote='success';
      //     return true
      //   }
      // },
    },
    components: {
      MtButton,
      heads
    }

  }
</script>
<style>
  @import "../sass/pageScss/prize.scss";
  .bankli{
    height:100px;
    background: url('../../static/Other_banks@2x.png') no-repeat center center;
    background-size: 100%;
    margin-top: 15px;
    text-align: left;
    padding: 10px 15px; 
    color: #fff;
  }
  .bankcard{
    text-align: right;
    margin-top: 30px;
  }
</style>

